<template>
  <div class="cultural-activities">
    <Header />
    <div class="page-header">
      <h1>汉中汉文化活动</h1>
      <p>感受两汉三国文化魅力，参与特色传统活动</p>
    </div>
    <div class="table-container">
      <table>
        <thead>
          <tr>
            <th>活动时间</th>
            <th>活动名称</th>
            <th>举办地点</th>
            <th>活动简介</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>每年3月</td>
            <td>汉中油菜花节</td>
            <td>勉县/南郑区</td>
            <td>结合油菜花海景观，举办汉文化演出、民俗展示</td>
          </tr>
          <tr>
            <td>每年9月</td>
            <td>张骞文化艺术节</td>
            <td>城固县张骞纪念馆</td>
            <td>纪念丝绸之路开拓者张骞，包含学术论坛、非遗展演</td>
          </tr>
          <tr>
            <td>农历八月十五</td>
            <td>拜月祈福大典</td>
            <td>兴汉胜境景区</td>
            <td>复原汉代中秋祭祀仪式，体验传统礼乐文化</td>
          </tr>
          <tr>
            <td>每周六</td>
            <td>汉调桄桄演出</td>
            <td>汉中市群众艺术馆</td>
            <td>国家级非遗剧种表演，展现陕南地方戏曲魅力</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
export default {
  name: 'CulturalActivities',
  components: { Header }
}
</script>

<style scoped>
.cultural-activities {
  padding-top: 100px;
}
.page-header {
  max-width: 1200px;
  margin: 0 auto 40px;
  text-align: center;
}
.table-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 15px rgba(0,0,0,0.08);
}
th, td {
  padding: 15px;
  text-align: left;
}
th {
  background: #42b983;
  color: white;
  font-weight: 500;
}
tr:nth-child(even) {
  background: #f8f9fa;
}
tr:hover {
  background: #f0f2f5;
}
</style>